<template>
  <div>
    <div style="width: 100%; height: 1px;">
      <el-button style="float: right; " v-print="'#printTable'" type="primary">打印</el-button>
    </div>
    <div id="printTable" class="printTableBox">
      <!-- 标题 -->
      <h1 class="title">四川普锐特制药业有限公司</h1>
      <h1 class="title">销售出库单</h1>

      <!-- 基本信息 -->
      <el-row :gutter="20" class="info-container">
        <el-col :span="12">
          <div>购货单位:{{ info.purchasingUnit }}</div>
        </el-col>
        <el-col :span="12">
          <div>发货单号:{{ info.deliveryOrderNumber }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-container">
        <el-col :span="24">
          <div>购货单位:{{ info.address }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-container">
        <el-col :span="8">
          <div>收货人:{{ info.receiver }}</div>
        </el-col>
        <el-col :span="8">
          <div>销售日期:{{ info.salesDate }}</div>
        </el-col>
        <el-col :span="8">
          <div>发货日期:{{ info.deliveryDate }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-container">
        <el-col :span="8">
          <div>收货电话:{{ info.receivingPhone }}</div>
        </el-col>
        <el-col :span="8">
          <div>出库日期:{{ info.outboundDate }}</div>
        </el-col>
        <el-col :span="8">
          <div>运输方式:{{ info.transportationMethod }}</div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <!--   <table border="1" class="tableBox">
        <thead>
          <tr id="table-header">
          </tr>
        </thead>
        <tbody id="table-body">
        </tbody>
      </table> -->
      <table border="1" class="tableBox">
        <thead>
          <tr>
            <!-- 使用 v-for 渲染表头 -->
            <th v-for="(header, index) in thList" :key="index">{{ header.name }}</th>
          </tr>
        </thead>
        <tbody>
          <!-- 使用 v-for 渲染表格数据 -->
          <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <td v-for="(column, colIndex) in thList" :key="colIndex">
              {{ row[column.code]}}
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 合计金额与合计金额（大写）放在同一行，label标题加粗 -->
      <el-row :gutter="20" class="info-container">
        <el-col :span="12">
          <div><span style="font-weight: bold;">合计金额:</span>{{ totalAmount}}</div>
        </el-col>
        <el-col :span="12">
          <div><span style="font-weight: bold;">合计 金额(大写):</span>{{totalAmountText}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-container">
        <el-col :span="12">
          <div>生产企业:{{ footer.producer}}</div>
        </el-col>
        <el-col :span="12">
          <div>地址:{{footer.address}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-container">
        <el-col :span="8">
          <div>制单人:{{ footer.people}}</div>
        </el-col>
        <el-col :span="8">
          <div>财务部:{{footer.creator}}</div>
        </el-col>
        <el-col :span="8">
          <div>仓储专员:{{footer.warehouse}}</div>
        </el-col>
      </el-row>
      <el-row style="font-size: 12px;">
        <el-col :span="4">
          第一联:{{ info.firstCopy }}
        </el-col>
        <el-col :span="4">
          第二联:{{ info.secondCopy }}
        </el-col>
        <el-col :span="4">
          第三联:{{ info.thirdCopy }}
        </el-col>
        <el-col :span="4">
          第四联:{{ info.fourthCopy }}
        </el-col>
        <el-col :span="4">
          第五联:{{ info.fifthCopy }}
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 顶部信息
        info: {
          firstCopy: "（白）存根",
          secondCopy: "（红）随货同行",
          thirdCopy: "（蓝）签单返回",
          fourthCopy: "（绿）业务",
          fifthCopy: "（黄）财务",
          address: '西安国际港务区港务大道89号',
          purchasingUnit: "国药控股陕西有限公司",
          receivingAddress: "西安国际港务区港务大道89号",
          receiver: "马开选",
          receivingPhone: "18702986757",
          deliveryOrderNumber: "XC2411181729",
          salesDate: "2024 - 11 - 01",
          deliveryDate: "2024 - 11 - 01",
          outboundDate: "2024 - 11 - 01",
          transportationMethod: "汽运",
        },
        thList: [{
            name: '代码',
            code: 'code'
          }, {
            name: '药品名称',
            code: 'productName'
          }, {
            name: '规格',
            code: 'specification'
          }, {
            name: '批号',
            code: 'batchNumber'
          }, {
            name: '单位',
            code: 'unit'
          }, {
            name: '数量',
            code: 'quantity'
          }, {
            name: '单价',
            code: 'unitPrice'
          }, {
            name: '金额',
            code: 'amount'
          }, {
            name: '折扣额',
            code: 'discountAmount'
          }, {
            name: '剂型',
            code: 'dosageForm'
          }, {
            name: '生产日期',
            code: 'productionDate'
          }, {
            name: '有效期至',
            code: 'expirationDate'
          }, {
            name: '批准文号',
            code: 'approvalNumber'
          },
          {
            name: '上市许可持有人',
            code: 'licenseHolder'
          }
        ],
        // 表格数据
        tableData: [{
            code: "FP002 - 03",
            productName: "吸入用硫酸沙丁胺醇溶液",
            specification: "2.5ml:5mg(以沙丁胺醇计)×5瓶/盒×20盒/件",
            batchNumber: "FB24H09",
            unit: "盒",
            quantity: 30,
            unitPrice: 0.150,
            amount: 4.50,
            discountAmount: 0.00,
            dosageForm: "吸入用溶液剂",
            productionDate: "2024 - 08 - 13",
            expirationDate: "2026 - 08 - 12",
            approvalNumber: "国药准字H20203547",
            licenseHolder: "四川普锐特药业有限公司"
          },
          {
            code: "FP002 - 03",
            productName: "吸入用硫酸沙丁胺醇溶液",
            specification: "2.5ml:5mg(以沙丁胺醇计)×5瓶/盒×20盒/件",
            batchNumber: "FB24H10",
            unit: "盒",
            quantity: 170,
            unitPrice: 0.850,
            amount: 144.50,
            discountAmount: 0.00,
            dosageForm: "吸入用溶液剂",
            productionDate: "2024 - 08 - 14",
            expirationDate: "2026 - 08 - 13",
            approvalNumber: "国药准字H20203547",
            licenseHolder: "四川普锐特药业有限公司"
          }
        ],
        // 合计信息
        totalAmount: 79800,
        totalAmountText: "柒万玖仟捌佰元整",
        // 页脚信息
        footer: {
          address: '四川省成都高新区安泰五路566号',
          producer: "四川普锐特制药有限公司",
          creator: "胡文星",
          people: '李燕',
          warehouse: '张三',
        },
      };
    },
    // mounted() {
    //   // 获取 DOM 元素
    //   const tableHeader = document.getElementById("table-header");
    //   const tableBody = document.getElementById("table-body");

    //   // 动态生成表头
    //   this.thList.forEach((header) => {
    //     const th = document.createElement("th"); // 创建表头单元格
    //     th.textContent = header; // 设置表头内容
    //     tableHeader.appendChild(th); // 添加到表头行
    //   });

    //   // 动态生成表格内容
    //   this.tableData.forEach((row) => {
    //     const tr = document.createElement("tr"); // 创建表格行
    //     const rowData = [
    //       row.code,
    //       row.productName,
    //       row.specification,
    //       row.batchNumber,
    //       row.unit,
    //       row.quantity,
    //       row.unitPrice,
    //       row.amount,
    //       row.discountAmount,
    //       row.dosageForm,
    //       row.productionDate,
    //       row.expirationDate,
    //       row.approvalNumber,
    //       row.licenseHolder,
    //     ]; // 数据与表头一一对应

    //     rowData.forEach((value) => {
    //       const td = document.createElement("td"); // 创建单元格
    //       td.textContent = value; // 设置单元格内容
    //       tr.appendChild(td); // 添加到当前行
    //     });
    //     tableBody.appendChild(tr); // 将行添加到表体
    //   });
    // }
  };
</script>

<style scoped lang="scss">
  table {
    width: 100%;
    /* 强制使用固定布局 */
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 15px;
    /* 合并表格边框 */
  }

  /* 标题样式 */
  .title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

  /* 信息部分样式 */
  .info-container {
    margin-bottom: 20px;
  }
</style>
<style scoped>
  @media print {

    html,
    body {
      margin: 0;
      padding: 0;
    }

    /* 打印时设置表格宽度，避免表格太宽 */
    table {
      width: 100%;
      /* 固定表格布局 */
      border-collapse: collapse;
      /* 合并表格边框 */
      text-align: center;
    }


    /* 防止标题溢出 */
    .title {
      font-size: 20px;
      text-align: center;
    }

    .printTableBox {
      padding: 10px;
    }
    .tableBox{
      th,td{
        max-width: 120px !important;
      }
    }
    /* 设置页面边距 */
    @page {
      size: auto;
      margin: 0;
    }
  }
</style>
